<template>
  <div class="createPost-container-detail">
    <el-form
      ref="postForm"
      :model="postForm"
      label-position="rigth"
      class="form-container"
    >
      <div class="createPost-main-container">
        <el-form-item
          label-width="120px"
          label="项目名称:"
          style="margin-bottom:5px"
        >
          <span>{{ postForm.project_name }}</span>
        </el-form-item>
        <el-row :gutter="24" style="margin-bottom:5px">
          <el-col :span="10">
            <el-form-item label-width="120px" label="开标时间:">
              <span>{{ postForm.bid_open_time }}</span>
            </el-form-item></el-col>
          <el-col :span="14">
            <el-form-item label-width="120px" label="详细地址:">
              <span>{{ postForm.address_detailed }}</span>
            </el-form-item></el-col>
        </el-row>
        <el-row :gutter="24" style="margin-bottom:5px">
          <el-col :span="10">
            <el-form-item label-width="120px" label="建设单位:">
              <span>{{ postForm.construction_unit }}</span>
            </el-form-item></el-col>
          <el-col :span="14">
            <el-form-item label-width="120px" label="代理单位:">
              <span>{{ postForm.agent_unit }}</span>
            </el-form-item></el-col>
        </el-row>

        <el-row :gutter="24" style="margin-bottom:5px">
          <el-col :span="10">
            <el-form-item label-width="120px" label="人员要求:">
              <span>{{ postForm.researchers }}</span>
            </el-form-item></el-col>
          <el-col :span="14">
            <el-form-item label-width="120px" label="项目类型:">
              <span>{{ postForm.business_type }}</span>
            </el-form-item></el-col>
        </el-row>

        <el-row :gutter="24" style="margin-bottom:5px">
          <el-col :span="10">
            <el-form-item label-width="120px" label="工程费用(万元):">
              <span>{{ postForm.engineering_cost }}</span>
            </el-form-item></el-col>
          <el-col :span="14">
            <el-form-item label-width="120px" label="最高限价(万元):">
              <span>{{ postForm.price_ceiling }}</span>
            </el-form-item></el-col>
        </el-row>

        <el-form-item
          label-width="120px"
          label="资格条件:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.qualifications"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="项目概况:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.project_overview"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>

        <el-form-item
          label-width="120px"
          label="分值组成:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.scores"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>

        <el-form-item
          label-width="120px"
          label="资信分情况:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.credit_points"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>

        <el-form-item
          label-width="120px"
          label="商务标评分情况:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.business_standard"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>

        <el-form-item
          label-width="120px"
          label="备注:"
          style="margin-bottom:5px"
        >
          <el-input
            v-model="postForm.remarks"
            :rows="1"
            :disabled="true"
            type="textarea"
            autosize
            placeholder="无"
          />
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="附件下载:"
          style="margin-bottom:5px"
        >
          <viewer
            ref="viewer"
            :images="images"
            class="viewer"
            style="width: 100px; boder: 1px solid red;display:none"
            @inited="inited"
          >
            <img
              v-for="(src, index) in images"
              :key="index"
              :src="src"
              class="image"
            >
          </viewer>
          <div class="container">
            <div
              v-for="(item, index) in file_list"
              :key="index"
              class="box"
              :class="item.active == 1 ? 'active' : ''"
              @click="changeBg(index)"
              @dblclick="dbClick(item.name, index)"
            >
              <div class="iconBox">
                <img width="80" height="80" :src="item.urls" alt="">
              </div>
              <div class="fileText">
                <span
                  :title="item.name"
                  style="
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 100%;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              display: -webkit-box;
            "
                  @click="downLoad(item.url, item.name)"
                >{{ item.name }}</span>
              </div>
            </div>
          </div>
          <span
            style="width:100%;text-align:center;color:#ccc"
          >(点击文件名下载)</span>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import VDistpicker from 'v-distpicker'
import { analysisExcel } from '@/api/folder'

import {
  getProjectDetail,
  insertFile,
  insertSigningInfo,
  downloadFile
} from '@/api/project'
import { getToken } from '@/utils/auth'
import { getInfo } from '@/api/user'

const defaultForm = {
  status: 'draft',
  // projectArea: { province: "广东省", city: "广州市", area: "海珠区" }, //项目区域
  address_detailed: '', // 详细地址
  projectAreaStr: '', // 选择的地区字符串
  bid_open_time: '', // 开标时间
  project_name: '', // 项目名称
  qualifications: '', // 资格条件
  researchers: '', // 人员要求
  constructionUnit: '', // 建设单位
  agentUnit: '', // 代理单位
  projectOverview: '', // 项目概况
  scores: '', // 分值组成
  business_standard: '', // 商务标评分情况
  credit_points: '', // 资信分情况
  engineering_cost: '', // 工程费用
  price_ceiling: '', // 最高限价
  business_type: '', // 业务类型
  file_path: [] // 上传文件后服务器返回的路片名称
}
// http://dc.tuobao.m.com/storage/images
export default {
  name: 'ArticleDetail',
  components: {
    Sticky,
    VDistpicker
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '', // 当前项目的id
      postForm: Object.assign({}, defaultForm),
      value: '',
      images: [], // 投标附件图片数组
      file_list: [], // 附件数组
      file_types: {
        docx: ['doc', 'docx'],
        xlsx: ['xls', 'xlsx'],
        ppt: ['ppt', 'pptx'],
        jpg: ['jpg', 'jpeg'],
        zip: ['zip', 'rar'],
        txt: ['txt', 'text'],
        mpge: ['mp3', 'mp4'],
        pdf: ['pdf'],
        png: ['png'],
        folder: ['folder']
      },
      options: [
        {
          value: '监理',
          label: '监理'
        },
        {
          value: '造价咨询',
          label: '造价咨询'
        },
        {
          value: '代理',
          label: '代理'
        },
        {
          value: '全过程咨询',
          label: '全过程咨询'
        }
      ],
      // 添加头部请求
      headers: {
        Authorization: 'Bearer ' + getToken(),

        post: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      },
      uploadAction: '/adminapi/project/insertFile'
    }
  },
  computed: {},
  created() {
    if (this.isEdit) {
      this.id = this.$route.query && this.$route.query.id
      this.value = this.$route.query.value
      this.getProjectData(this.id)
    }
    this.getUserInfo()
  },
  methods: {
    // 返回上一级路由
    goBack() {
      this.$router.push('/project/index')
    },
    // 下载文件
    downLoad(url, name) {
      this.$notify({
        title: '开始下载',
        duration: 2000
      })
      const x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.onload = function() {
        const url = window.URL.createObjectURL(x.response)
        const a = document.createElement('a')
        a.href = url
        a.download = name
        a.click()
      }
      x.send()
    },
    inited(viewer) {
      this.$viewer = viewer
    },
    // 双击事件
    dbClick(fileName, index) {
      if (
        this.file_list[index].fileType == 'png' ||
        this.file_list[index].fileType == 'jpg' ||
        this.file_list[index].fileType == 'jpeg'
      ) {
        // console.log(this.fileList[this.sonIndex].url);
        const arr = []
        arr.push(this.file_list[index].url)
        this.images = arr
        this.$viewer.view(0)
      } else {
        this.$message({
          type: 'info',
          message: '当前类型文件不支持预览!'
        })
      }
    },
    // 鼠标选中文件改变背景颜色
    changeBg(index) {
      let num
      for (let i = 0; i < this.file_list.length; i++) {
        if (i === index) {
          num = i
        } else {
          this.file_list[i].active = 0
        }
      }
      this.file_list[num].active = 1
    },
    // 获取项目
    getProjectData(id) {
      new Promise((reslove, reject) => {
        getProjectDetail({ id: id }).then(response => {
          this.postForm = response.data
          const fileList = this.postForm.file_path
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].type == '2') {
              if (
                fileList[i].fileType == 'png' ||
                fileList[i].fileType == 'jpeg' ||
                fileList[i].fileType == 'jpg'
              ) {
                this.file_list.push({
                  name: fileList[i].file_name,
                  url: fileList[i].file_path,
                  urls: fileList[i].file_path,
                  fileType: fileList[i].fileType
                })
              } else {
                this.file_list.push({
                  name: fileList[i].file_name,
                  url: fileList[i].file_path,
                  urls: this.getIconUrl(fileList[i].fileType),
                  fileType: fileList[i].fileType
                })
              }
            }
          }
        })
      })
    },
    // 根据返回的数据类型显示不同的图片
    getIconUrl(type) {
      const types_icon_arr = this.file_types
      let show_tyupe = 'none'
      for (const i in types_icon_arr) {
        types_icon_arr[i].forEach(_type => {
          if (type == _type) {
            show_tyupe = i
            // break;
          }
        })
      }

      return require('@/assets/resourse/' + show_tyupe + '.png')
    },
    // 发布
    submit() {
      new Promise((resolve, reject) => {
        insertSigningInfo({
          id: this.id,
          submitFrom: this.submitFrom,
          username: this.username
        }).then(() => {
          this.$message({
            type: 'success',
            message: '签约信息填写成功!'
          })
          this.$router.push('/branch/index')
        })
      })
    },
    // 获取当前用户的登录信息
    getUserInfo() {
      new Promise((resolve, reject) => {
        getInfo().then(response => {
          // console.log("info");
          // console.log(response.data);
          this.username = response.data.name // 当前登录用户的姓名
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin: 0px;
}
</style>
<style lang="scss">
@import "~@/styles/mixin.scss";

.createPost-container-detail {
  position: relative;
  span {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 25px;
    color: #36373b;
    letter-spacing: 0.5px;
    font-weight: 400;
    display: table-cell;
    vertical-align: middle;
  }
  .sub-navbar {
    background: transparent;
  }
  .sub-navbar button {
    display: block;
    height: 40px;
    margin-top: 20px;
    background: #42b983;
    span {
      color: #fff;
      line-height: 20px;
    }
  }
  .createPost-main-container {
    // padding: 30px 45px 0px 100px;
    .el-form-item--medium {
      .el-form-item__content {
        line-height: 25px;
      }
      .el-form-item__label {
        line-height: 25px;
      }
    }
    .container {
      /* width: 100%; */
      // margin: 10px;
      /* border: 1px solid red; */
      display: grid;
      grid-row-gap: 20px;
      grid-column-gap: 20px;
      grid-template-columns: repeat(auto-fill, 100px);
      .box {
        width: 112px;
        height: 136px;
        // margin: 5px;
        padding: 10%;
        .iconBox {
          width: 100%;
          height: 80px;
          text-align: center;
          position: relative;
          .btnDelete {
            width: 14px;
            height: 14px;
            background: rgb(146, 145, 145);
            border: 0px none;
            /* border-radius: 1px; */
            position: absolute;
            float: right;
            text-align: center;
            line-height: 14px;
            top: 0px;
            right: 0px;
            display: block;
          }
          .btnDelete::after {
            content: "X";
            font-size: 16px;
            color: #fff;
          }
        }
      }
      .fileText {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        height: 23px;
        line-height: 23px;
        color: #595c5f;
        font-size: 15px;
      }
    }
    .postInfo-container {
      position: relative;
      @include clearfix;
      text-align: center;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
.createPost-container-detail .el-textarea__inner{
  padding: 0px 0px;
  resize:none
}
.createPost-container-detail .el-textarea.is-disabled .el-textarea__inner{
  background: #fff;
  color: #36373b;
  border: none;
}

.article-textarea ::v-deep {
  .el-textarea .is-disabled .el-textarea__inner {
    background-color: white;
    color: #000;
    opacity: 0.7;
  }
  // .el-input__inner {
  //   background-color: white;
  //   white-space: pre-wrap;
  //   color: #000;
  //   opacity: 0.7;
  // }
}
</style>
